<template>
  <view class="redeemCode">
    <view class="redeemCode-wrap">
      <image class="redeemCode-img" :src="obj.coverImg" mode="" />
      <view class="redeemCode-text">
        <view>{{ obj.title }}</view>
        <!-- <view class="text-red">¥{{ obj.price }}/1</view> -->
      </view>
    </view>
    <view class="redeemCode-content">
      <view class="redeemCode-content-text">兑换码</view>
      <input placeholder="请输入兑换码" v-model="code" class="redeemCode-content-input" type="text">
    </view>
    <view class="redeemCode-btn">
      <view class="redeemCode-btn-submit cancel">取消</view>
      <view class="redeemCode-btn-submit ok" @click="getexchange">确定</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad, onShow } from "@dcloudio/uni-app"
import { exchange } from '@/api/user'
const code = ref('')
const obj = ref({
  coverImg: '',
  title: '',
  price: '',
  id: ''
})
onLoad(async (options: any) => {
  obj.value.coverImg = options.coverImg
  obj.value.title = options.title
  // obj.value.price = options.price
  obj.value.id = options.id
})
onShow(() => {
})
const getexchange = async () => {
  let res: any = await exchange(obj.value.id, code.value)
  if (res.code == 0) {
    uni.showToast({
      title: '兑换成功',
      duration: 1000,
      icon: 'none'
    })
    setTimeout(() => {
      uni.navigateBack({
        delta: 1 // 表示返回上一级页面，如果 delta 大于 1 则返回多级页面  
      });
    }, 1000)
  }
}
</script>

<style lang="scss">
.redeemCode {
  padding: 54rpx 0rpx 0rpx 34rpx;

  &-wrap {
    display: flex;
    align-items: flex-start;
  }

  &-img {
    width: 240rpx;
    height: 176rpx;
    margin-right: 30rpx;
    margin-bottom: 48rpx;
  }

  &-text {
    color: #2F2F2F;

    .text-red {
      margin-top: 18rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #E01F21;
    }
  }

  &-content {
    display: flex;
    align-items: center;

    &-text {
      font-weight: 500;
      font-size: 32rpx;
      color: #2F2F2F;
      margin-right: 18rpx;
    }

    &-input {
      width: 574rpx;
      height: 76rpx;
      background: #F3F3F3;
      border-radius: 16rpx;
      padding-left: 18rpx;

      &::-webkit-input-placeholder {
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }
  }

  &-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 64rpx;

    &-submit {
      width: 176rpx;
      height: 76rpx;
      line-height: 76rpx;
      border-radius: 44rpx;
      text-align: center;

      &.cancel {
        color: 2F2F2F;
        background: #E7E7E7;
        margin-right: 66rpx;
      }

      &.ok {
        color: #FFFFFF;
        background: #068FEB;
      }
    }
  }
}
</style>